<template>
	<view class="body">
		<view class="header-box">
			<!-- 顶部 -->
			<view class="one">
				<view class="logo">
					<view class="logo-box">
						<img :src="info.logo" alt="">
					</view>
					<view class="title-box">
						<view v-if="!info.name" class="smaill-name">
							加载中
						</view>
						<view v-else class="smaill-name">
							{{info.name}}
						</view>
						<view class="smaill-info">
							{{ info.ccdesc ? info.ccdesc : "暂无介绍"}}
						</view>
					</view>
				</view>
				<view class="follow" @click="onAdd">
					<img src="https://image.hzwltb69.com/app/imgs/derivative/follow.png" alt="">
					{{ isFollow ? '已关注' : '关注'}}
				</view>
			</view>
			<!-- 推品 -->
			<view class="two">
				<view class="info" @click="onScollDetail">
<!-- 					<view class="">
						推品名称
					</view>
					<i></i>
					<view class="">
						推品详细信息
					</view> -->
					<swiper
					class="swiper"
					:vertical="true"
					:autoplay="true"
					:interval="2000"
					:duration="500"
					@change="change"
					>
					<swiper-item class="items" v-for="item,index in swiperList" :key="index">
						<view class="infos">
							{{item}}
						</view>
					</swiper-item>
					</swiper>
				</view>
				<view class="arrow" @click="onScollDetail">
					<img src="https://image.hzwltb69.com/app/imgs/derivative/mystoreright.png" alt="">
				</view>
			</view>
		</view>
		<view class="one-box">
			<view class="Recommend-box">
				<view class="Recommend-title">
					<view class="bigtitle">
						主推商品
					</view>
					<i></i>
					<view class="">
						商城补贴季
					</view>
				</view>
				<view class="goods-list">
					<view v-for="item,index in topList" class="Recommend-card">
						<view class="goodsx">
							<img :src="item.product.large" alt="">
						</view>
						<view class="goods-name">
							{{item.product.name}}
						</view>
						<view class="goods-go" @click="todetail(item.product.id)">
							点击进入
						</view>
					</view>
				</view>
			</view>
				<!-- 瀑布流排版 -->
				<view class="waterfall">
						<uv-waterfall ref="waterfall"
							v-model="goodsList"
							:add-time="50"
							column-count="2"
							left-gap="10"
							right-gap="10"
							column-gap="8"
							column-width="40"
							@changeList="changeList"
							>
							<template v-slot:list1>
								<view>
									<view v-for="(item, index) in list1"
										:key="item.id"
										class="waterfall-item"
										>
										<view @click="todetail(item.id)" class="waterfall-item__image">
			<!-- 								<uv-image :src="item.img" mode="widthFix" :width="item.width+'px'">
												<template v-slot:loading>
												</template>
											</uv-image> -->
											<image :src="item.img" mode="widthFix" style="width: 100%;"></image>
											<view class="footer-box">
												<view v-if="ownerId == memberId" class="pirce">
													<img src="https://image.hzwltb69.com/app/imgs/derivative/hotpirce.png" alt="">
												<view class="all">
													{{((item.price - item.cost) * rebate/100).toFixed(2)}}
												</view>
												<view class="did">
													佣金比例{{rebate}}%
												</view>
												</view>
<!-- 												<view v-else class="" style="color:#fa3534">
													<span style="margin-right: 5rpx;font-size: 25rpx;">补贴</span>
													{{item.rebate}}%
												</view> -->
												<view class="goods-name">
													{{item.name}}
												</view>
												<view class="goods-price">
													￥
													<view style="font-size: 30rpx;">{{item.price }}</view>
													<view style="margin-left: 5rpx;font-size: 25rpx;margin-top: 5rpx;">售价</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:list2>
								<view>
									<view v-for="(item, index) in list2"
										:key="item.id"
										class="waterfall-item"
										>
										<view @click="todetail(item.id)" class="waterfall-item__image">
			<!-- 								<uv-image :src="item.img" mode="widthFix" :width="item.width+'px'">
												<template v-slot:loading>
												</template>
											</uv-image> -->
											<image :src="item.img" mode="widthFix" style="width: 100%;"></image>
											<view class="footer-box">
												<view v-if="ownerId == memberId" class="pirce">
													<img src="https://image.hzwltb69.com/app/imgs/derivative/hotpirce.png" alt="">
												<view class="all">
													{{((item.price - item.cost) * rebate/100).toFixed(2)}}
												</view>
												<view class="did">
													佣金比例{{rebate}}%
												</view>
												</view>
<!-- 												<view v-else class="" style="color:#fa3534">
													<span style="margin-right: 5rpx;font-size: 25rpx;">补贴</span>
													{{item.rebate}}%
												</view> -->
												<view class="goods-name">
													{{item.name}}
												</view>
												<view class="goods-price">
													￥
													<view style="font-size: 30rpx;">{{item.price }}</view>
													<view style="margin-left: 5rpx;font-size: 25rpx;margin-top: 5rpx;">售价</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
						</uv-waterfall>
					</view>
					
					
					<!-- 固定排版  -->
<!-- 			<view class="list-box">
				<view
				class="info-card"
				v-for="item,index in goodsList"
				:key="index"
				:class="{'u-left':index % 2 !== 0}"
				@click="todetail(item.product.id)"
				>
					<view class="img-box">
						<img :src="item.product.large" alt="">
					</view>
					<view class="footer-box">
						<view v-if="ownerId == memberId" class="pirce">
							<img src="https://image.hzwltb69.com/app/imgs/derivative/hotpirce.png" alt="">
						<view class="all">
							{{((item.product.price - item.product.cost) * rebate/100).toFixed(2)}}
						</view>
						<view class="did">
							佣金比例{{rebate}}%
						</view>
						</view>
						<view v-else class="" style="color:#fa3534">
							<span style="margin-right: 5rpx;font-size: 25rpx;">补贴</span>
							￥{{item.product.defaultSku.rebate}}
						</view>
						<view class="goods-name">
							{{item.product.name}}
						</view>
						<view class="goods-price">
							￥
							<view style="font-size: 30rpx;">{{item.product.price }}</view>
							<view style="margin-left: 5rpx;font-size: 25rpx;margin-top: 5rpx;">售价</view>
						</view>
					</view>
				</view> -->
			</view> 
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list1: [],// 瀑布流第一列数据
				list2: [],// 瀑布流第二列数据
				// 用户ID 查询用户拥有的小店
				ownerId: '',
				goodsList: [],
				info:{
					name: '',
					logo: '',
					desc: '加载中',
				},
				rebate: null,
				// 小店id 需要请求后拿到
				smaillId: '',
				// 消费者id
				memberId: uni.getStorageSync('UId') || 0,
				// 主推商品
				topList: [],
				// swiperList
				swiperList: [],
				scollId: null,
				// 是否关注
				isFollow: false,
				page: 0,
				SIZE: 10,
				isEnd: false
			}
		},
		onReachBottom() {
			if(this.onEnd) return
			this.page += 1
			this.getList()
		},
		onLoad() {
			console.log(this.$Route.query);
			this.ownerId = this.$Route.query.ownerId
			this.getListx()
			// this.getRebate()
		},
		methods:{
			changeList(e){
				this[e.name].push(e.value);
			},
			getListx(){
				let that = this;
				that.$http('goods.getbyOnwer', {
					UId: this.ownerId,
					memberId: this.memberId
					// UId: 3004,
					// memberId: 3004
				}).then(res =>{
					that.info = res.derivative[0]
					that.topList = res.tops
					// that.goodsList = res.list
					that.topList.forEach(item =>{
						that.swiperList.push(item.product.name)
					})
					this.scollId = that.topList[0].product.id
					this.isFollow = res.isFavorite
					this.smaillId = res.derivative[0].id
					this.getList()
					this.getRebate()
				})
			},
			// 获取列表
			getList(){
				let that = this
				that.$http('goods.getSmailList', {
					UId: this.ownerId,
					page: that.page,
					size: that.SIZE,
				})
				.then(res => {
					if(res.list.length == 0){
						that.isEnd = true
						return
					}
					if(that.goodsList.length == 0){
						that.goodsList = res.list
					}else{
						that.goodsList = that.goodsList.concat(res.list)
					}
				})
			},
			// 获取当前的佣金比例
			getRebate(){
				let that = this
				that.$http('goods.tuanduilist', {
					UId: this.ownerId,
					page: 1
				})
				.then(res => {
					that.rebate = res.rebate[0]
				})
			},
			// 前往商品详情
			todetail(id) {
				
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: id,
						ownerId: this.ownerId
					}
				})
			},
			// 滚动切换
			change(e){
				// console.log(e.detail.current);
				this.scollId = this.topList[e.detail.current].product.id
			},
			// 滚动栏跳转
			onScollDetail(){
				this.todetail(this.scollId)
			},
			// 关注
			onAdd(){
				let that = this
				if(!uni.getStorageSync('UId')){
					uni.showToast({
						icon:'error',
						title:'用户未登录'
					})
					return
				}
				that.$http('goods.smailladd',{
					UId: uni.getStorageSync('UId'),
					derivativeId: that.smaillId
				})
				.then(res =>{
					console.log(res);
					uni.showToast({
						icon:'success',
						title: that.isFollow ? '取消关注成功' : '关注成功'
					})
					that.isFollow = !that.isFollow
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	$white:#fff;
	.body{
		background-color: #f1f1f1;
		.header-box{
			width: 100%;
			height: 210rpx;
			background: url('https://image.hzwltb69.com/app/imgs/derivative/shoreBgc.png') no-repeat;
			background-size: 100% 100%;
			padding: 15rpx;
			.one{
				width: 100%;
				height: 130rpx;
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.logo{
					display: flex;
					.logo-box{
						width: 90rpx;
						height: 90rpx;
						// background-color: skyblue;
						border-radius: 50%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.title-box{
					margin-left: 20rpx;
					.smaill-name{
						font-size: 35rpx;
						font-weight: 600;
						margin-top: 0rpx;
					}
					.smaill-info{
						margin-top: 0rpx;
					}
				}
			    .follow{
					font-size: 25rpx;
					width: 130rpx;
					height: 60rpx;
					background-color: #ef8742;
					color: #fff;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					img{
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
			.two{
				display: flex;
				justify-content: space-between;
				color: #896752;
				.info{
					width: 600rpx !important;
					display: flex;
				}
				.arrow{
					img{
						width: 15rpx;
						height: 20rpx;
					}
				}
			}
		}
		.one-box{
			padding: 20rpx;
			.Recommend-box{
				width: 100%;
				height: 420rpx;
				// background-color: pink;
				background: url('https://image.hzwltb69.com/app/imgs/derivative/tuibgc.png') no-repeat;
				background-size: 100% 100%;
				padding: 15rpx;
				.Recommend-title{
					height: 70rpx;
					line-height: 70rpx;
					display: flex;
					.bigtitle{
						font-weight: 600;
					}
					i{
						width: 1rpx;
						height: 30rpx;
						border-right: 1rpx solid black;
						margin-top: 20rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
				.goods-list{
					display: flex;
					justify-content: space-around;
					align-items: center;
					.Recommend-card{
						width: 220rpx;
						height: 325rpx;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						// justify-content: center;
						align-items: center;
						border-radius: 25rpx;
						overflow: hidden;
						.goodsx{
							width: 100%;
							height: 200rpx;
							// background-color: pink;
							img{
								width: 100%;
								height: 100%;
							}
						}
						.goods-name{
							width: 200rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-top: 15rpx;
						}
						.goods-go{
							margin-top: 10rpx;
							width: 90%;
							height: 50rpx;
							background-color: #f8cbac;
							border-radius: 15rpx;
							text-align: center;
							color: #d25246;
							line-height: 50rpx;
						}
					}
				}
			}
			.list-box{
				margin-top: 20rpx;
				width: 100%;
				// height: 300rpx;
				// background-color: pink;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-around;
				.info-card{
					width: 347rpx;
					height: 450rpx;
					background-color: $white;
					margin-bottom: 15rpx;
					// margin-left: 20rpx;
					// margin-left: 13rpx;
					border-radius: 25rpx;
					overflow: hidden;
					.img-box{
						width: 100%;
						height: 300rpx;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.footer-box{
						padding: 10rpx;
						.pirce{
							display: flex;
							img{
								width: 45rpx;
								height: 35rpx;
							}
							.all{
								color: #f42f2f;
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
							.did{
								color: #c4c4c4;
								font-size: 24rpx;
								margin-top: 5rpx;
							}
						}
						.goods-name{
							margin-top: 10rpx;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							// overflow-wrap: break-word;
						}
						.goods-price{
							display: flex;
							margin-top: 8rpx;
							color: #e57725;
						}
					}
				}
			}
		}
	}
	.u-left{
		margin-left: 21rpx;
	}
	// 滚动
	.swiper{
		height: 50rpx;
		width: 100%;
		line-height: 50rpx;
		overflow: hidden;
	}
	.items{
		display: flex;
		.infos{
			width: 600rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 30rpx;
		}
	}
	.crad-bigbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		.card-boxs{
			// margin-left: 15rpx;
			width: 340rpx;
			background-color: #fff;
			margin-top: 20rpx;
			// width: 300rpx;
			// height: 200rpx;
			overflow: hidden;
			border-radius: 25rpx;
			.fots{
				margin-top: 20rpx;
				padding-left: 10rpx;
				display: flex;
				// flex-direction: column;
				align-items: center;
				color: #fd2f33;
				.rebate{
					margin-left: 20rpx;
					color: #ccc;
					font-size: 24rpx;
				}
			}
			.bodys{
				margin-top: 10rpx;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}
			.pirce-box{
				display: flex;
				margin-top: 8rpx;
				color: #e57725;
				padding-left: 10rpx;
			}
		}
	}
	.footer-box{
		padding: 10rpx;
		.pirce{
			display: flex;
			img{
				width: 45rpx;
				height: 35rpx;
			}
			.all{
				color: #f42f2f;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
			.did{
				color: #c4c4c4;
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}
		.goods-name{
			margin-top: 10rpx;
			width: 300rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			// overflow-wrap: break-word;
		}
		.goods-price{
			display: flex;
			margin-top: 8rpx;
			color: #e57725;
		}
	}
	$show-lines: 1;
		// @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
		.waterfall {
			background: #f1f1f1;
		}
		.waterfall-item {
			overflow: hidden;
			margin-top: 10px;
			border-radius: 6px;
		}
		.waterfall-item {
			background: #fff;
		}
		.waterfall-item__ft {
			padding: 20rpx;
			background: #fff;
			&__title {
				margin-bottom: 10rpx;
				line-height: 48rpx;
				font-weight: 700;
				.value {
					font-size: 32rpx;
					color: #303133;
				}
			}
			&__desc .value {
				font-size: 28rpx;
				color: #606266;
			}
			&__btn {
				padding: 10px 0;
			}
		}
</style>